<script setup lang="ts">
import { requiredCheck, singleIpCheck } from "@/utils/verify";
import { ref, onMounted, nextTick } from "vue";
import { addData, editData } from "@/api/modules/system/account";
import { cfgList, cfgSetManageip } from "@/api/modules/system/params";
import { ElMessage } from "element-plus";
import SelectIfaceInput from "@/components/SelectIfaceInput/index.vue";

interface Props {
  title?: string;
  rowData?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  title: "新增账号",
  rowData: undefined
});
defineOptions({
  name: "UpdateForm" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";
import BaseButton from "@/components/BaseButton/index.vue";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    ifname: [...requiredCheck("请选择网口")],
    ip: [...requiredCheck("请输入IP"), { validator: singleIpCheck }],
    mask: [...requiredCheck("请输入掩码"), { validator: singleIpCheck }],
    router: [...requiredCheck("请输入网关"), { validator: singleIpCheck }]
  },
  defaultData: {
    loginTime: 900
  }
});
const ifaces = ref([]);

async function getIface() {
  try {
    const res = await ifaceAll();
    console.log(res);
    if (res) {
      ifaces.value = Object.values(res);
      console.log(ifaces.value);
    }
    Object.values(res);
  } catch (error) {}
}

async function submitCb() {
  await submit({
    addApi: addData,
    updateApi: editData,
    sendData: {
      name: updateFormData.name,
      passwordRe: updateFormData.passwordRe || "",
      password: updateFormData.password || "",
      role: updateFormData.role,
      id: updateFormData?.id
    }
  });
  emits("success");
}

async function getCfg() {
  const res = await cfgList();
  if (res.result.data.sysip) {
    Object.assign(updateFormData, res.result.data.sysip);
  }
}

async function setCfg() {
  await updateFormRef.value.validate();
  await cfgSetManageip({
    sysip: JSON.stringify(updateFormData)
  });
  ElMessage.success("更新成功");
  getCfg();
}

onMounted(() => {
setTimeout(()=>{
  getCfg();
},1000)
});
const isEdit = ref(false);
</script>

<template>
  <el-card>
    <template #header>
      <div class="card-header h-box justify-between">
        <span>管理地址</span>
        <div class="card-footer h-box justify-end">
          <base-button @click="getCfg" type="refresh_icon_text"></base-button>
          <base-button :disabled="!isEdit" @click="setCfg" type="save_icon"></base-button>
          <base-button v-if="!isEdit" @click="isEdit = !isEdit" type="edit_text" class="mg-l-sm"></base-button>
          <base-button v-else @click="isEdit = !isEdit" type="cancel_icon" class="mg-l-sm"></base-button>
        </div>
      </div>
    </template>

    <el-form :disabled="!isEdit"  ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="70px" label-suffix="：">
      <div class="h-box">
        <el-form-item label="网口" prop="ifname">
          <SelectIfaceInput width="140px" v-model="updateFormData.ifname"></SelectIfaceInput>
        </el-form-item>
        <el-form-item label="网关" prop="router">
          <el-input style="width: 140px" placeholder="请输入" v-model="updateFormData.router"></el-input>
        </el-form-item>
      </div>
      <div class="h-box">
        <el-form-item label="IP" prop="ip">
          <el-input style="width: 140px" placeholder="请输入" v-model="updateFormData.ip"></el-input>
        </el-form-item>
        <el-form-item label="掩码" prop="mask">
          <el-input style="width: 140px" placeholder="请输入" v-model="updateFormData.mask"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
</template>

<style lang="scss" scoped></style>
